vue2.0学习笔记（四）：vue组件主要指令用法

vue组件主要指令用法:github链接 （demo02--持续更新中）

v-text

更新元素的 textContent。如果要更新部分的 textContent ，需要使用 {{ Mustache }} 插值。

 <span v-text="msg"></span>

v-html

插入一段html片段

 <div v-html="html"></div>

v-show ------ v-if

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

 <div v-show="isShow">v-show 为true 时,元素显示</div>
 <div v-show="!isShow">v-show false 时,元素不显示 渲染 但是 display:none;</div>
 <div v-if="isActive">v-if 为true 时,元素显示 </div>
 <div v-if="!isActive">v-if 为false 时,元素不显示 dom 不渲染</div>

v-for

用 v-for 把一个数组对应为一组元素
我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。

建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

<ul>
  <li v-for="(item, index) in items" :key="item.id">
    {{ index }} - {{ item.message }}
  </li>
</ul>

v-on

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>

<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>

<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">

<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">

<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

v-bind

绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
动态地绑定一个或多个特性，或一个组件 prop 到表达式。
在绑定 class 或 style 特性时，支持其它类型的值，如数组或对象。可以通过下面的教程链接查看详情。
在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。
没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">

<!-- 缩写 -->
<img :src="imageSrc">

<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">

<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 绑定一个有属性的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- 通过 prop 修饰符绑定 DOM 属性 -->
<div v-bind:text-content.prop="text"></div>

<!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component>

<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

v-model
在表单控件或者组件上创建双向绑定。

  <input type="text" v-model="inputText">
  {{inputText}}

demo02源码

<!--存放html-->
<template>
  <div class="hello">
    <span v-text="msg"></span>
     <el-button @click="_handleClick()">默认按钮</el-button>
    <br/>
    <!-- 和下面的一样 -->
    <span>{{msg}}</span>
    <br/>
  
  
  
    <div v-html="html"></div>
    <br>
  
  
    <div v-show="isShow">v-show 为true 时,元素显示</div>
    <div v-show="!isShow">v-show false 时,元素不显示 渲染 但是 display:none;可以打开控制台看见</div>
    <div v-if="isActive">v-if 为true 时,元素显示 </div>
    <div v-if="!isActive">v-if 为false 时,元素显示 dom 不渲染</div>
  
    <ul>
      <li v-for="(item, index) in items" :key="item.id">
        {{ index }} - {{ item.message }}
      </li>
    </ul>

    <input type="text" v-model="inputText">
    {{inputText}}
  </div>
</template>

<!--存放js-->
<script>
  export default {
    name: "Demo01",
    data() {
      return {
        msg: "demo02 -- vue组件主要的指令的用法",
        html: '<span style="background:red">这是一段html片段</span>',
        isShow: true,
        isActive: true,
        inputText:'',
        items: [{
            message: 'one',
            id:'11'
          },
          {
            message: 'two',
            id:'22'
          }
        ]
      };
    },
    created() {
    },
    mounted: function() {
      this.$nextTick(function() {});
    },
    methods: {
      _handleClick() {
        console.log(111);
      }
    }
  };
</script>

<style scoped lang="less">
  .hello {
    height: 200px;
    h2 {
      background: #dcdc3e;
    }
  }
</style>